<template>
	<view :key="refreshKey">
		<uv-modal ref="realNameAuthenticationModal" title="提示" confirmText="立即认证" @confirm="realNameAuthenticationPage">
			<view class="slot-content">
				请先进行实名认证
			</view>
		</uv-modal>
		<view class="setting-info">
			<view class="set-cell animate__fadeInUp"  v-for="item in cellItems" :key="item.title" @click="item.click" style="animation-duration: 2s;">
				<view class="set-left" if="item.iconUrl"> 
					<image
					:src="item.iconUrl"/>
				</view>
				<view class="set-center">{{ item.title }}</view>
				<view class="set-right">
				   <image src="../../static/img/set/expand.png"></image>
				</view>
			</view>

			
			<!-- <uv-cell-group class="uv-cell-group-tbody">
				<uv-cell  title="修改登录密码" :titleStyle="titleStyle"
					@click="gotoPage('../modifyLoginPwd/modifyLoginPwd')">
					<template #value>
						<uv-icon name="arrow-right" size="34rpx" color="#b3b3b3"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell  title="修改支付密码" :titleStyle="titleStyle"
					@click="gotoPage('../modifyPayPwd/modifyPayPwd')">
					<template #value>
						<uv-icon name="arrow-right" size="34rpx" color="#b3b3b3"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell  title="银行卡管理" :titleStyle="titleStyle"
					@click="bindBankCardPage">
					<template #value>
						<uv-icon name="arrow-right" size="34rpx" color="#b3b3b3"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell  title="钱包地址管理" :titleStyle="titleStyle"
					@click="checkAuthenticationGotoPage('../bindWalletAddress/bindWalletAddress')">
					<template #value>
						<uv-icon name="arrow-right" size="34rpx" color="#b3b3b3"></uv-icon>
					</template>
				</uv-cell>
			<uv-cell border title="用户协议" :titleStyle="titleStyle" @click="staticContentPage('用户协议')">
					<template #value>
						<uv-icon name="arrow-right" size="34rpx" color="#b3b3b3"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell border title="隐私条款" :titleStyle="titleStyle" @click="staticContentPage('隐私条款')">
					<template #value>
						<uv-icon name="arrow-right" size="34rpx" color="#b3b3b3"></uv-icon>
					</template>
				</uv-cell> 

			</uv-cell-group> -->
		</view>
		<view class="fixed-bottom-inner">
			<button class="submit" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountInfo: '',
				refreshKey:0,
				cellItems: [
					{
						title: '修改登录密码',
						iconUrl: '../../static/img/set/lock.png',
						click: () => {
							this.gotoPage('../modifyLoginPwd/modifyLoginPwd')
						}
					},
					{
						title: '修改支付密码',
						iconUrl: '../../static/img/set/payPassword.png',
						click: () => {
							this.gotoPage('../modifyPayPwd/modifyPayPwd')
						}
					},
					{
						title: '钱包地址管理',
						iconUrl: '../../static/img/set/wallet.png',
						click:() => {
							this.checkAuthenticationGotoPage('../bindWalletAddress/bindWalletAddress')
						}
					},
					{
						title: '隐私条款',
						iconUrl: '../../static/img/set/lock.png',
						click:() => {
							this.staticContentPage('用户协议')
						}
					},
					{
						title: '用户协议',
						iconUrl: '../../static/img/set/lock.png',
						click:() => {
							this.staticContentPage('隐私条款')
						}
					}
			
				]
			}
		},
		onLoad() {
			this.getMemberInfo();
		},
		onShow() {
			this.refreshKey += 1;
		},
		methods: {

			staticContentPage(title) {
				uni.navigateTo({
					url: '../staticContent/staticContent?title=' + title
				});
			},

			checkAuthenticationGotoPage(path) {
				if (this.accountInfo.authenticationState == '1') {
					this.$refs.realNameAuthenticationModal.open();
					return;
				}
				if (this.accountInfo.authenticationState == '2') {
					uni.showToast({
						title: "实名审核后才可以操作",
						icon: "none"
					});
					return;
				}
				this.gotoPage(path);
			},

			formatBankCardInfo() {
				return this.accountInfo.bankName ? (this.accountInfo.bankName + ' ' +
					this.accountInfo.bankCardHolder) : '立即绑定';
			},

			bindBankCardPage() {
				this.gotoPage('../bindBankCard/bindBankCard');
			},

			bindWalletAddressPage() {
				this.gotoPage('../bindWalletAddress/bindWalletAddress');
			},

			formatWalletAddress() {
				return this.accountInfo.walletAddress ? (this.accountInfo.chainType + ' ' +
					this.accountInfo.walletAddress) : '立即绑定';
			},

			formatRealName() {
				var text = this.accountInfo.authenticationStateName;
				if (this.accountInfo.authenticationState == '3') {
					text = text + ' ' + this.accountInfo.realName;
				}
				return text;
			},

			realNameAuthenticationPage() {
				this.gotoPage('../realNameAuthentication/realNameAuthentication');
			},

			logout() {
				var that = this;
				uni.$uv.http.post('/logout').then(res => {
					try {
						uni.removeStorageSync('tokenName');
					} catch (e) {}
					uni.reLaunch({
						url: "../login/login"
					});
				});
			},

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.accountInfo = res.data;
				});
			},

			gotoPage(path) {
				uni.navigateTo({
					url: path
				});
			}

		}
	}
</script>

<style scoped lang="less">

	page {
		background: url('/static/img/my_bg.png') no-repeat;
	    background-size: 100% 100%;
		font-size: 28rpx;
	}

	.setting-info {
		padding: 40rpx 40rpx;
	}
	.set-cell{
		display: flex;
		align-items: center;
        height: 120rpx;
        background: #FFF;
        border-radius: 28rpx;
		padding:0 20rpx;
		margin-bottom: 40rpx;
		.set-left{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.set-center{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.set-right{
			width: 32rpx;
			height: 32rpx;
			image{
				width: 100%;
				height: 100%;
			 }
			}
	}

	.unbind-tip {
		font-size: 20rpx;
		color: #888;
	}

	.real-name {
		color: #18b566;
		font-weight: bold;
	}



	.fixed-bottom-inner {
		padding: 0px 40rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
	}

	.submit {
        background: #FEE19E;
		border-radius: 50rpx ;
        color: #000;
        height: 100rpx;
		line-height: 100rpx;
	}
</style>